<template>
<div class="announcement-box">
  <nav-bar title="公告列表" fixed="fixed" />
  <div class="announcement-content">
     <van-pull-refresh class="pull-refresh" v-model="isLoading" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" :offset="50" :immediate-check="false" finished-text="暂无数据" @load="onLoad">
            <ul class="announcement-list">
              <li @click="goLink(1)">
                <div class="info">
                  <span class="name">关于注册</span>
                  <span class="time">2019-12-18  10:24:50</span>
                </div>
              </li>
              <li>
                <div class="info">
                  <span class="name">关于注册</span>
                  <span class="time">2019-12-18  10:24:50</span>
                </div>
              </li>
              <li>
                <div class="info">
                  <span class="name">关于注册</span>
                  <span class="time">2019-12-18  10:24:50</span>
                </div>
              </li>
              <li>
                <div class="info">
                  <span class="name">关于注册</span>
                  <span class="time">2019-12-18  10:24:50</span>
                </div>
              </li>
              <li>
                <div class="info">
                  <span class="name">关于注册</span>
                  <span class="time">2019-12-18  10:24:50</span>
                </div>
              </li>
              <li>
                <div class="info">
                  <span class="name">关于注册</span>
                  <span class="time">2019-12-18  10:24:50</span>
                </div>
              </li>
            </ul>
        </van-list>
     </van-pull-refresh>
  </div>
</div>
</template>
<script>
export default {
  name: 'Announcement',
  data() {
    return {
      isLoading: false,
      finished: false,
      loading: false
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 500);
    },
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
      }, 500);
    },
    goLink() {
      this.$router.push({ 'path': '/announcement/details', query: { id: 1 } });
    }
  }
};
</script>
<style lang="less" scoped>
.announcement-box{
  .announcement-content{
    padding: 20px 0;
    .announcement-list{
      li{
        padding: 28px 33px 23px;
        font-size:32px;
        background-color: #fff;
        margin-bottom: 2px;
        display: flex;
        justify-content: space-between;
        .info{
          .name{
            display: block;
            color: #333;
            font-size: 30px;
          }
          .time{
            color: #999;
            font-size: 24px;
          }
        }
        &::after{
          content: '';
          display: block;
          height: 20px;
          width: 10px;
          margin-top:45px;
          display: inline-block;
          background-image: url('../../assets/images/icon-arrow-right-grey.png');
          background-position: center center;
          background-repeat: no-repeat;
          background-size: contain;
        }
      }
    }
  }
}
</style>
